<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<title>日程管理</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap2.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.print.min.css" rel="stylesheet" media="print">
	<link href="/static/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
	<link href="/static/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/lib/cupertino/jquery-ui.min.css" rel="stylesheet">
	<link href="/static/artDialog/css/ui-dialog.css" rel="stylesheet">
	<link href="/static/wickedpicker/dist/wickedpicker.min.css" rel="stylesheet">
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
	<script src="/static/fullcalendar/lib/jquery.min.js"></script>
	<script src="/static/fullcalendar/lib/jquery-ui.min.js"></script>
	<script src="/static/fullcalendar/lib/moment.min.js"></script>
	<script src="/static/fullcalendar/fullcalendar.js"></script>
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="/static/artDialog/dist/dialog-min.js"></script>
	<script src="/static/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/wickedpicker/dist/wickedpicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<style>
		body{
			margin:40px 40px;
			padding:0;
			background:white;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 14px;
		}
		#calendar{
			width:900px;
            margin-top: 40px;
			margin:0 auto;
		}
		.taxt{
			width:440px;
		}
		.time{
			width:100px;
		}
		.textarea{
			width:300px;
		}
		.slidertext{
			padding-top:40px;
		}
		.timepicki{
			position:relative;
			z-index: 999;
		}
		#edit{
			position:relative;
			width:300px;
		}
		#edittitle{
			padding-bottom:10px;
			font-weight: bold;
			font-size: 18px;
		}
	</style>
	<script>
	$(function(){
		$("#calendar").fullCalendar({

            //初始化FullCalendar
            //设置头部信息，如果不想显示，可以设置header为false
            header: {
                //日历头部左边：初始化切换按钮
                left: 'prev,next today',
                //日历头部中间：显示当前日期信息
                center: 'title',
                //日历头部右边：初始化视图
                right: 'month,agendaWeek,agendaDay'
            },
            //设置是否显示周六和周日，设为false则不显示
            weekends: true,
            //日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系
            defaultDate: '2018-05-15',
            //日程数据

            events:function (start,end,timezone, callback) {
                    $.ajax({
                        type: "POST",
                        url: "/colleague/colleague_schedule?colleague_id={{ colleague_id }}",
                        dataType: "text",
                        success: function (JsonResult) {
                            JsonResult = JSON.parse(JsonResult);
                            var data = eval(JsonResult);
                            var eventsData= [];
                            for (var i = 0; i < data.length; i++) {
                                eventsData.push({
                                    id: JsonResult[i].id,
                                    title: data[i].title,
                                    start: new Date(Date.parse(data[i].start)),
                                    end: new Date(Date.parse(data[i].end)),
                                    color: data[i].color
                                    {#allDay: JsonResult[i].Alldate,#}
                                    {#color: JsonResult[i].color#}
                                });
                            }
                            console.log(eventsData);
                            callback(eventsData);
                        },
                        error : function(JsonResult) {
                            {#alert(JsonResult);#}
                        },
                    });
                },

			theme: true,

			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'button1 button2 month,agendaWeek,agendaDay,listMonth'
			},
			firstDay: 1,
			monthNames: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
			monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
			dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
			dayNamesShort:["日","一","二","三","四","五","六"],
			buttonText:{
				today: "今天",
				month: "月",
				week: "周",
				day: "天",
				listMonth:"列表"
			},
			allDayDefault:false,
			slotLabelFormat:"H",
			businessHours: {
				dow:[1,2,3,4,5],
				start:"8:00",
				end:"17:00"
			},
			allDaySlot: true,
			allDayText: "全天",
			timeFormat: "HH:mm",//设置的是添加的具体的日程上显示的时间
			views:{
				month:{
					titleFormat:"YYYY年M月"
				},
				week:{
					titleFormat:"YYYY年M月D日",
					columnFormat:"M.D dddd"
				},
				day:{
					titleFormat:"YYYY年M月D日 dddd",
					columnFormat:"M/D dddd"
				}
			},
			eventClick:function(event,jsEvent,view){
				var editstarttime = $.fullCalendar.formatDate(event.start,"YYYY-MM-DD HH:mm:ss");
				$("#edittitle").html(event.title);
				var eventtitle = event.title;
				if(event.end){
					var editendtime = $.fullCalendar.formatDate(event.end,"YYYY-MM-DD HH:mm:ss");
					$("#edittime").html(editstarttime+"  至  "+editendtime);
				}else{
					$("#edittime").html(editstarttime);
				};
                //编辑日程
				dialog({
					title:"日程信息",
					content:$("#edit"),
					okValue:"编辑",
					ok:function(){
                        document.getElementById("titledetail").value= event.title;
                        document.getElementById("startdate").value= $.fullCalendar.formatDate(event.start,"YYYY-MM-DD");
                        document.getElementById("starttime").value= $.fullCalendar.formatDate(event.end,"HH:mm:ss").split(" ").join("");
                        document.getElementById("stopdate").value= $.fullCalendar.formatDate(event.end,"YYYY-MM-DD");
                        document.getElementById("endtime").value= $.fullCalendar.formatDate(event.end,"HH:mm:ss").split(" ").join("");

						$(".datepicker").datepicker({
							language:"zh-CN",
							format:"yyyy-mm-dd",
							todayHighlight:true,
							autoclose:true,
							weekStart:0
						});
						$(".timepicki").wickedpicker({
							// now: time,
                            value:"12:10:10",
							title:'',
							showSeconds:true,
							twentyFour:true
						});
						//修改日程
						dialog({
							title:"修改日程",
							content:$("#dialog-form"),
							okValue:"确定",
							ok:function(){
								var titledetail = $("#titledetail").val();
								var startdate = $("#startdate").val();
								var starttime = $("#starttime").val().split(" ").join("");
								var enddate = $("#stopdate").val();
								var endtime = $("#endtime").val().split(" ").join("");
								var level = $("#level").val();
								var oldTitle= event.title;
                                var oldStartDate= $.fullCalendar.formatDate(event.start,"YYYY-MM-DD");
                                var oldStartTime= $.fullCalendar.formatDate(event.start,"HH:ss:mm").split(" ").join("");
                                var oldEndDate= $.fullCalendar.formatDate(event.end,"YYYY-MM-DD");
                                var oldEndTime = $.fullCalendar.formatDate(event.end,"HH:ss:mm").split(" ").join("");
								if(titledetail){
									$.ajax({
										url:'http://localhost:5000/events/events_update',
				   						data:"{\"title\":\""+titledetail+"\",\"level\":\""+level+"\",\"sdate\":\""+startdate+" "+starttime+"\",\"edate\":\""+enddate+" "+endtime+"\",\"oldTitle\":\""+oldTitle+"\",\"oldStart\":\""+oldStartDate+" "+oldStartTime+"\",\"oldEnd\":\""+oldEndDate+" "+oldEndTime+"\"}",
                                        type:'POST',
				   						dataType:'text',
				  						success:function(data){
										    alert(data);
				  							window.location.reload();
				  						},
				  						error:function(){
										    alert("修改日程失败！");
				  							window.location.reload();
				  						}

									});
								};
							},
							cancelValue:"关闭",
							cancel:function(){
								//$("#ui-datepicker-div").remove();
							}
						}).showModal();

					},
                    //删除日程
					button:[{
						value:"删除",
						callback:function(){
						    editstarttime= $.fullCalendar.formatDate(event.start,"YYYY-MM-DD HH:ss:mm");
                            editendtime= $.fullCalendar.formatDate(event.end,"YYYY-MM-DD HH:ss:mm");
							$.ajax({
										url:'http://localhost:5000/events/events_delete',
				   						data:"{\"title\":\""+eventtitle+"\",\"sdate\":\""+editstarttime+"\",\"edate\":\""+editendtime+"\"}",
				   						type:'POST',
				   						dataType:'text',
				  						success:function(data){
										    alert(data);
				  							window.location.reload();
				  						},
				  						error:function(){
										    alert("删除失败");
				  							window.location.reload();
				  						}

									});
						}
					}],
					cancelValue:"取消",
					cancel:function(){}
				}).showModal();
			}

		});
	});
	</script>
</head>
<body style="background: url('/static/imgs/background.jpg');background-repeat:no-repeat;background-size:cover">
   <!-- 导航栏 -->
    <nav class="navbar navbar-fixed-top navbar-inverse" style="height: 40px;" >
      <div class="container">
        <div class="navbar-header" style="height: 40px;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/user/to_user_index_page">主页</a></li>
            <li><a href="/schedule/toScheduleList">代办列表</a></li>
            <li><a href="/colleague/colleague_list">好友管理</a></li>
            <li><a href="/group/user_group_list">小组管理</a></li>
            <li><a href="#" data-toggle="modal"  data-target="#updateUserInfo">欢迎您 {{ session["user_nickname"] }}</a></li>
            <li><a href="/user/user_logout">注销</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

     <!-- 修改用户信息 -->
<div class="modal fade" id="updateUserInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
	            </div>
                <div class="modal-body">
                      <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="update_user_name" value="{{ session['user_name'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">密码</label>
					    <input type="text" class="form-control" id="update_user_pwd" value="{{ session['user_pwd'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="update_user_nickname" value="{{ session['user_nickname'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="update_user_sex" value="{{ session['user_sex'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="update_user_email" value="{{ session['user_email'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="update_user_phone" value="{{ session['user_phone'] }}">
					  </div>
	            </div>
                <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="updateUser()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script> //修改小组
	function updateUser() {
	    var user_name = $('#update_user_name').val();
	    var user_pwd = $('#update_user_pwd').val();
	    var user_nickname = $('#update_user_nickname').val();
	    var user_sex = $('#update_user_sex').val();
	    var user_email = $('#update_user_email').val();
	    var user_phone = $('#update_user_phone').val();
		if(confirm("确认修改？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/user/user_data_update",//url
                data:"{\"user_sex\":\""+user_sex+"\",\"user_name\":\""+user_name+"\",\"user_pwd\":\""+user_pwd+"\",\"user_nickname\":\""+user_nickname+"\",\"user_email\":\""+user_email+"\",\"user_phone\":\""+user_phone+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("修改用户信息失败！");
                    window.location.reload();
                }
            });
        }
	};
    </script>

    <!-- 导航栏结束 -->

     <!-- 修改用户信息 -->
<div class="modal fade" id="updateUserInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
	            </div>
                <div class="modal-body">
                      <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="update_user_name" value="{{ session['user_name'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">密码</label>
					    <input type="text" class="form-control" id="update_user_pwd" value="{{ session['user_pwd'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="update_user_nickname" value="{{ session['user_nickname'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="update_user_sex" value="{{ session['user_sex'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="update_user_email" value="{{ session['user_email'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="update_user_phone" value="{{ session['user_phone'] }}">
					  </div>
	            </div>
                <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="updateUser()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script> //修改小组
	function updateUser() {
	    var user_name = $('#update_user_name').val();
	    var user_pwd = $('#update_user_pwd').val();
	    var user_nickname = $('#update_user_nickname').val();
	    var user_sex = $('#update_user_sex').val();
	    var user_email = $('#update_user_email').val();
	    var user_phone = $('#update_user_phone').val();
		if(confirm("确认修改？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/user_data_update",//url
                data:"{\"user_sex\":\""+user_sex+"\",\"user_name\":\""+user_name+"\",\"user_pwd\":\""+user_pwd+"\",\"user_nickname\":\""+user_nickname+"\",\"user_email\":\""+user_email+"\",\"user_phone\":\""+user_phone+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("修改小组信息成功！");
                        window.location.reload();
                    }
                    else{
                        alert("修改小组信息失败！");
                    }
                },
                error: function () {
                    alert("修改用户信息成功！");
                    window.location.reload();
                }
            });
        }
	};
    </script>

    <!-- 导航栏结束 -->

    <br>
	<div id="calendar" style="margin-top: 40px;"></div>
	<div id="set" style="display:none" class="taxt">
		<div id="slider"></div>
		<div style="text-align: center" class="slidertext">
			<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold; text-align: center; font-size: 16px;">
		</div>
	</div>
	<div id="edit" style="display: none">
		<p id="edittitle"></p>
		<p id="edittime"></p>
	</div>
	<div id="dialog-form" style="display:none">
		<form class="form-inline">
			<p>
				<label>日程安排：</label>
				<textarea class="textarea" rows="4" placeholder="内容" id="titledetail"></textarea>
			</p>
             <p>
				<label>紧急程度：</label>
				<select id = "level" class="form-control">
                    <option value="0">一般</option>
                    <option value="1">普通</option>
                    <option value="2">紧急</option>
                </select>
			</p>
			<p>
				<label>开始时间：</label>
				<input type="text" class="time datepicker" id="startdate">
				<input type="text" class="time timepicki" id="starttime">
			</p>
			<p id="enddate">
				<label>结束时间：</label>
				<input type="text" class="time datepicker" id="stopdate">
				<input type="text" class="time timepicki" id="endtime">
			</p>
		</form>
	</div>
</body>
</html>